<template>
  <div>
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        placeholder="What needs to be done?"
        autofocus
        @keyup.enter="addTodoList"
        v-model="userInputName"
      />
    </header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInputName: ""
    };
  },
  methods: {
    // 输入框按下回车后处理函数(添加待处理项)
    addTodoList() {
      // console.log("开始添加item");
      console.log(this.$store);
      this.$store.commit("addTodoList", { name: this.userInputName });
      // 添加完待处理项后清空输入框
      this.userInputName = "";
    }
  }
};
</script>

<style lang="css" scoped>
</style>